<template>
  <div class="carousel-container">
    <el-carousel
      :height="isSmallScreen ? '30vh' : '58vh'"
      indicator-position="outside"
      class="info-carousel"
    >
      <el-carousel-item v-for="(person, index) in missingPersons" :key="index">
        <div class="card-layout">
          <!-- 图片占位区 -->
          <div class="image-placeholder">
            <div class="placeholder-content">
              <img :src="person.imageUrl" alt="失踪者照片" class="image-icon" />
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="content-container">
            <div class="top-label">紧急寻人</div>
            <h2 class="title">{{ person.name }} <span class="age-tag" :style="{ background: '#ffe58f', color: 'white' }">{{ person.age }}岁</span> <span class="gender-tag" :style="{ background: person.gender === '男' ? '#85a5ff' : '#ffa39e', color: 'white' }">{{ person.gender }}</span></h2>

            <div class="info-grid">
              <div class="info-item">
                <span class="label">身高：</span>
                <span class="value">{{ person.height }}</span>
              </div>
              <div class="info-item">
                <span class="label">体型：</span>
                <span class="value">{{ person.bodyType }}</span>
              </div>
              <div class="info-item full-width">
                <span class="label">失踪时间：</span>
                <span class="value warning">{{ person.missingDate }}</span>
              </div>
              <div class="info-item full-width">
                <span class="label">失踪地点：</span>
                <span class="value highlight">{{ person.missingLocation }}</span>
              </div>
            </div>

            <div class="detail-section">
              <p class="detail-title">特征描述：</p>
              <p class="detail-content">{{ person.description }}</p>
            </div>

            <div class="stats-box">
              <div class="contact-info">
                <el-icon class="phone-icon"><Phone /></el-icon>
                <a :href="'tel:' + person.contact">{{ person.contact }}</a>
              </div>
              <el-button type="danger" class="details-btn" round @click="showClueDialog(person)">
                线索提供 <el-icon class="btn-icon"><Promotion /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 线索提供对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentPerson ? `为 ${currentPerson.name} 提供线索` : '线索提供'"
      width="680px"
      class="clue-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-alert">
        <el-icon class="alert-icon"><WarningFilled /></el-icon>
        <span>请提供真实有效信息，您的帮助可能拯救一个家庭！</span>
      </div>

      <el-form
        :model="clueForm"
        :rules="formRules"
        ref="formRef"
        label-position="top"
        @submit.prevent="submitClue"
      >
        <div class="form-columns">
          <div class="form-col">
            <el-form-item label="您的姓名" prop="name">
              <template #label>
                <span class="form-label">
                  <el-icon><User /></el-icon> 姓名
                </span>
              </template>
              <el-input
                v-model="clueForm.name"
                placeholder="请输入真实姓名"
                clearable
              />
            </el-form-item>

            <el-form-item label="联系电话" prop="phone">
              <template #label>
                <span class="form-label">
                  <el-icon><Iphone /></el-icon> 联系方式
                </span>
              </template>
              <el-input
                v-model="clueForm.phone"
                placeholder="请输入有效手机号码"
                maxlength="11"
                clearable
              />
            </el-form-item>
          </div>

          <div class="form-col">
            <el-form-item label="线索时间" prop="time">
              <template #label>
                <span class="form-label">
                  <el-icon><Clock /></el-icon> 发现时间
                </span>
              </template>
              <el-date-picker
                v-model="clueForm.time"
                type="datetime"
                placeholder="选择日期时间"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>

            <el-form-item label="线索地点" prop="location">
              <template #label>
                <span class="form-label">
                  <el-icon><Location /></el-icon> 发现地点
                </span>
              </template>
              <el-input
                v-model="clueForm.location"
                placeholder="请输入详细地点"
                clearable
              />
            </el-form-item>
          </div>
        </div>

        <el-form-item label="线索详情" prop="content">
          <template #label>
            <span class="form-label">
              <el-icon><Document /></el-icon> 详细描述
            </span>
          </template>
          <el-input
            v-model="clueForm.content"
            type="textarea"
            :rows="4"
            placeholder="请详细描述您看到的情况（衣着特征、行为状态、周边环境等）"
            resize="none"
          />
        </el-form-item>

        <el-form-item label="图片证据" prop="images">
          <template #label>
            <span class="form-label">
              <el-icon><Picture /></el-icon> 上传照片（最多3张）
            </span>
          </template>
          <el-upload
            v-model:file-list="fileList"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="3"
            accept="image/jpeg,image/png"
            :on-exceed="handleExceed"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="upload-tip">支持JPEG/PNG格式，单张不超过5MB</div>
            </template>
          </el-upload>
        </el-form-item>

        <div class="privacy-notice">
          <el-icon><InfoFilled /></el-icon>
          我们承诺严格保密您的个人信息，仅用于寻找失踪人员
        </div>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取消</el-button>
        <el-button
          type="danger"
          size="large"
          :loading="submitting"
          @click="submitClue"
          class="submit-btn"
        >
          提交线索
          <template #loading>
            提交中<el-icon class="is-loading"><Loading /></el-icon>
          </template>
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage, type FormInstance, type UploadFile } from 'element-plus'
import {
  Phone,
  Promotion,
  User,
  Iphone,
  Document,
  Picture,
  Plus,
  WarningFilled,
  InfoFilled,
  Clock,
  Location,
  Loading
} from '@element-plus/icons-vue'

interface MissingPerson {
  name: string
  age: number
  gender: string
  height: string
  bodyType: string
  missingDate: string
  missingLocation: string
  description: string
  contact: string
  imageUrl: string
}

// 数据部分
const missingPersons = ref<MissingPerson[]>([
  {
    name: '张伟',
    age: 35,
    gender: '男',
    height: '175cm',
    bodyType: '中等身材',
    missingDate: '2024-05-20 14:30',
    missingLocation: '北京市朝阳区国贸地铁站附近',
    description: '失踪时身穿蓝色条纹衬衫、黑色休闲裤，戴黑色边框眼镜，携带黑色公文包。',
    contact: '138-1234-5678',
    imageUrl: 'https://picsum.photos/200/300?random=1'
  },
  {
    name: '李四',
    age: 28,
    gender: '女',
    height: '160cm',
    bodyType: '瘦',
    missingDate: '2024-05-21 10:00',
    missingLocation: '上海市浦东新区',
    description: '失踪时身穿红色外套，黑色长裤。',
    contact: '139-8765-4321',
    imageUrl: 'https://picsum.photos/200/300?random=2'
  },
]) // 保持原有数据

const dialogVisible = ref(false)
const currentPerson = ref<MissingPerson | null>(null)
const submitting = ref(false)
const formRef = ref<FormInstance>()
const fileList = ref<UploadFile[]>([])

const clueForm = reactive({
  name: '',
  phone: '',
  time: '',
  location: '',
  content: '',
})

const formRules = {
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度为2-10个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '请选择线索时间', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入详细地点', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请填写线索详情', trigger: 'blur' },
    { min: 10, message: '至少输入10个字符的描述', trigger: 'blur' }
  ]
}

// 添加屏幕尺寸检测
const isSmallScreen = ref(false)

const checkScreenSize = () => {
  isSmallScreen.value = window.innerWidth <= 1280
}

onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})

// 方法部分
const showClueDialog = (person: MissingPerson) => {
  currentPerson.value = person
  dialogVisible.value = true
}

const handleExceed = () => {
  ElMessage.warning('最多上传3张照片')
}

const submitClue = async () => {
  if (!formRef.value) return

  try {
    submitting.value = true
    await formRef.value.validate()

    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('线索提交成功！感谢您的帮助！')
    dialogVisible.value = false
    formRef.value.resetFields()
    fileList.value = []
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
.carousel-container {
  width: 100%;
  height: 100%;

  .card-layout {
    display: flex;
    height: 100%;

    .image-placeholder {
      flex: 0 0 40%;
      display: flex;
      align-items: center;
      justify-content: center;

      .placeholder-content {
        text-align: center;
        color: var(--breadcrumb-color);
        width: 100%;.image-icon {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-bottom: 16px;
      }

        span {
          display: block;
          font-size: 14px;
        }
      }
    }

    .content-container {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 10px;

      .top-label {
        position: absolute;
        top: 10px;
        right: 40px;
        background: linear-gradient(45deg, #ff6b6b, #ff4444);
        color: white;
        padding: 8px 24px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(255, 68, 68, 0.2);
        z-index: 1;
      }

      .title {
        margin: 0 0 14px;
        font-size: 28px;
        color: var(--text-color);

        .age-tag, .gender-tag {
          font-size: 16px;
          padding: 4px 12px;
          border-radius: 4px;
          margin-left: 12px;
        }
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 6px;

        .info-item {
          display: flex;
          align-items: center;
          padding: 5px;
          background: var(--info-item-background);
          border-radius: 6px;

          &.full-width {
            grid-column: 1 / -1;
          }

          .label {
            flex: 0 0 80px;
            color: var(--text-color);
            font-size: 14px;
          }

          .value {
            color: var(--text-color);
            font-weight: bolder;

            &.highlight {
              color: #ff4444;
              font-weight: bolder;
            }

            &.warning {
              color: #f56c6c;
            }
          }
        }
      }

      .detail-section {
        flex: 1;
        background: var(--detail-section-background);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
        overflow: hidden;

        .detail-title {
          color: #ff4444;
          font-weight: 600;
          margin: 0 0 12px;
        }

        .detail-content {
          color: var(--text-color);
          line-height: 1.6;
          margin: 0;
          font-size: 14px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .stats-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .contact-info {
          display: flex;
          align-items: center;
          color: #ff4444;
          font-weight: 500;

          .phone-icon {
            margin-right: 8px;
            font-size: 18px;
          }

          a {
            color: #ff4444;
            text-decoration: none;
          }
        }

        .details-btn {
          padding: 12px 32px;
          font-size: 14px;
          letter-spacing: 1px;
          box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);

          .btn-icon {
            margin-left: 8px;
          }
        }
      }
    }

    @media screen and (max-width: 1280px) {
      .content-container {
        padding: 8px;

        .top-label {
          top: 5px;
          right: 20px;
          padding: 6px 16px;
          font-size: 12px;
        }

        .title {
          font-size: 20px;
          margin: 0 0 10px;

          .age-tag, .gender-tag {
            font-size: 14px;
            padding: 3px 8px;
            margin-left: 8px;
          }
        }

        .info-grid {
          gap: 4px;
          margin-bottom: 4px;

          .info-item {
            padding: 4px;

            .label {
              flex: 0 0 70px;
              font-size: 12px;
            }

            .value {
              font-size: 12px;
            }
          }
        }

        .detail-section {
          padding: 12px;
          margin-bottom: 16px;

          .detail-title {
            font-size: 14px;
            margin: 0 0 8px;
          }

          .detail-content {
            font-size: 12px;
            line-height: 1.4;
            -webkit-line-clamp: 2;
          }
        }

        .stats-box {
          .contact-info {
            .phone-icon {
              font-size: 16px;
            }

            a {
              font-size: 12px;
            }
          }

          .details-btn {
            padding: 8px 20px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

:deep(.clue-dialog) {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    background: linear-gradient(135deg, #ff6b6b, #ff4444);
    padding: 15px 12px;
    border-radius: 8px;
    border-bottom: 1px solid #ffe0e0;
    margin-bottom: 10px;

    .el-dialog__title {
      color: white;
      font-size: 20px;
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      top: 24px;
      right: 32px;

      .el-icon {
        color: rgba(255,255,255,0.9);
        font-size: 24px;

        &:hover {
          color: white;
        }
      }
    }
  }

  .dialog-alert {
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 5px;

    .alert-icon {
      color: #ff4444;
      font-size: 20px;
      margin-right: 12px;
    }

    span {
      color: #ff4444;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 5px;
  }

  .form-label {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: #666;
    margin-bottom: 2px;
    .el-icon {
      color: #ff6b6b;
      margin-right: 8px;
      font-size: 16px;
    }
  }

  .el-input, .el-textarea {
    --el-input-focus-border-color: #ff8888;
  }

  .el-date-editor {
    width: 100%;
  }

  .el-upload {
    border: 2px dashed #ffd6d6;
    transition: all 0.3s;
    &:hover {
      border-color: #ff4444;
      transform: translateY(-2px);
    }
  }

  .upload-tip {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
  }

  .privacy-notice {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
    margin-top: 12px;

    .el-icon {
      color: #ff6b6b;
      margin-right: 8px;
    }
  }

  .el-dialog__footer {
    padding: 10px 12px;
    border-top: 1px solid #eee;
  }

  .submit-btn {
    padding: 15px 40px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(255, 68, 68, 0.3);
    }
  }
}
</style>
